<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 警告 -->
    <el-alert
    title="注意：只允许为第三级分类设置相关参数！"
    type="warning"
    effect="dark"
    show-icon>
    </el-alert>
    <!-- 选择分类项 -->
    <el-row>
      <el-col  :span="2">
        选择商品分类:
      </el-col>
      <el-col :span="10">
        <el-cascader
        v-model="catId"
        :options="ParentRolesList"
        :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children'}"
        @change="ParentRolesChange" clearable>
        </el-cascader>
      </el-col>
    </el-row>
    <!-- 切换栏 -->
    <el-tabs type="border-card">
      <el-tab-pane label="动态参数">
        <el-row>
        <el-col >
        <el-button type="primary" :disabled="disabled" size="small" @click="addOnly('many')">添加参数</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
      :data="CategoriesListDo"
      style="width: 100%"
      border
      row-key="attr_id">
       <el-table-column type="expand">
        <template slot-scope="data">
        <el-tag
          v-for="(item,index) in data.row.attr_vals"
          :key="index"
          closable
          :disable-transitions="false"
          @close="tagClose(data.row, index, 'many')">
          {{item}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="data.row.inputVisible"
          v-model="data.row.inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(data.row, 'many')"
          @blur="handleInputConfirm(data.row, 'many')"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput(data.row)">+ New Tag</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="#" type="index"></el-table-column>
      <el-table-column
        prop="attr_name"
        label="参数名称">
      </el-table-column>
      <el-table-column
        prop="mg_state"
        label="操作">
        <template slot-scope="data">
        <div class="bt">
          <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="index(data.row, 'many')">修改</el-button>
        <el-button type="danger"   size="mini"  icon="el-icon-delete"  @click="del(data.row, 'many')">删除</el-button>
        </div>
        </template>
      </el-table-column>
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性">
        <el-row>
        <el-col >
        <el-button type="primary" :disabled="disabled" size="small" @click="addOnly('only')">添加属性</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
      :data="categoriesList"
      style="width: 100%"
      border>
       <el-table-column type="expand">
        <template slot-scope="data">
        <el-tag
          v-for="(item,index) in data.row.attr_vals"
          :key="index"
          closable
          :disable-transitions="false"
          @close="tagClose(data.row, index, 'only')">
          {{item}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="data.row.inputVisible"
          v-model="data.row.inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(data.row, 'only')"
          @blur="handleInputConfirm(data.row, 'only')"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput(data.row)">+ New Tag</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="#" type="index"></el-table-column>
      <el-table-column
        prop="attr_name"
        label="参数名称">
      </el-table-column>
      <el-table-column
        prop="mg_state"
        label="操作">
        <template slot-scope="data">
        <div class="bt">
          <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="index(data.row, 'only')">修改</el-button>
        <el-button type="danger"   size="mini"  icon="el-icon-delete"  @click="del(data.row, 'only')">删除</el-button>
        </div>
        </template>
      </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
    </el-card>

    <!-- 添加静态属性对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="onlyDialogVisible"
      width="50%"
      :before-close="onlyClose"
      @close="closeonlyDialogVisible">
      <el-form :model="onlyForm" :rules="Rules" ref="addruleForm"    label-width="100px" class="demo-ruleForm">
        <el-form-item label="静态属性" prop="attr_name">
          <el-input v-model="onlyForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onlyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOnlyUrl">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改静态属性对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="setDialogVisible"
      width="50%"
      :before-close="setClose"
      @close="closesetDialogVisible">
      <el-form :model="onlyForm" :rules="Rules" ref="addruleForm"    label-width="100px" class="demo-ruleForm">
        <el-form-item label="静态属性" prop="attr_name">
          <el-input v-model="onlyForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setOnlyUrl">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      catId: 0, // 保存添加分类sele下拉框
      ParentRolesList: [], // 商品分类
      categoriesList: [], // 选择分类后显示的表格数据静态
      CategoriesListDo: [], // 选择分类后显示的表格数据动态
      disabled: true, // 控制按钮显示
      inputValue: '', // 编辑分类参数名称
      inputVisible: false,
      onlyDialogVisible: false,
      setDialogVisible: false,
      onlyForm: { // 添加静态属性
        attr_name: '',
        attr_sel: 'only'
      },
      cat_id: 0,
      attr_id: 0,
      Rules: {
        attr_name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getParentRolesList() // 获取select下拉数据
  },
  methods: {
    ParentRolesChange () { // 下拉框值改变
      if (this.catId.length < 3) {
        this.categoriesList = []
        this.categoriesList = []
        this.CategoriesListDo = []
        this.disabled = true
        return
      }
      this.disabled = false
      this.getCategoriesList()
      this.getCategoriesListDo()
    },
    async getParentRolesList () { // 获取select下拉数据
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.ParentRolesList = res.data
    },
    async getCategoriesList () { // 获取静态参数数据
      const { data: res } = await this.$http.get('categories/' + this.catId[this.catId.length - 1] + '/attributes', { params: { sel: 'only' } })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : [] // 将tag取出的转化为数字，之后遍历
        item.inputVisible = false
        item.inputValue = ''
      })
      this.categoriesList = res.data
    },
    async getCategoriesListDo () { // 获取动态参数数据
      const { data: res } = await this.$http.get('categories/' + this.catId[this.catId.length - 1] + '/attributes', { params: { sel: 'many' } })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
        item.inputVisible = false
        item.inputValue = ''
      })
      this.CategoriesListDo = res.data
    },
    showInput (data) { // Newteg展示
      console.log(data)
      data.inputVisible = true
      this.$nextTick(_ => { // 页面重新渲染之后才会触发指定的函数
        // this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    addOnly (activeName) { // 添加静态属性弹框
      this.onlyForm.attr_sel = activeName
      this.onlyDialogVisible = true
    },
    addOnlyUrl () { // 添加静态属性url
      this.$refs.addruleForm.validate(async boolean => {
        if (!boolean) return this.$message.error('错误')
        const { data: res } = await this.$http.post('categories/' + this.catId[this.catId.length - 1] + '/attributes', this.onlyForm)
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        this.$message({ message: res.meta.msg, type: 'success' })
        this.onlyDialogVisible = false
        this.getCategoriesList()
        this.getCategoriesListDo()
      })
    },
    onlyClose () { // 关闭静态弹框
      this.$refs.addruleForm.resetFields()
      this.onlyForm.attr_name = ''
      this.onlyDialogVisible = false
    },
    setClose () { // 关闭框
      this.$refs.addruleForm.resetFields()
      this.onlyForm.attr_name = ''
      this.setDialogVisible = false
    }, // 关闭静态弹框
    setOnlyUrl () { // 修改提交按钮
      this.$refs.addruleForm.validate(async boolean => {
        if (!boolean) return this.$message.error('格式不对')
        console.log(this.onlyForm)
        const { data: res } = await this.$http.put('categories/' + this.cat_id + '/attributes/' + this.attr_id, this.onlyForm)
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.$message({ message: res.meta.msg, type: 'success' })
        this.setDialogVisible = false
        this.getCategoriesList()
        this.getCategoriesListDo()
      })
    },
    closesetDialogVisible () { // 关闭对话框重置表单
      this.onlyForm.attr_name = ''
      this.$refs.addruleForm.resetFields()
    },
    closeonlyDialogVisible () {
      this.onlyForm.attr_name = ''
      this.$refs.addruleForm.resetFields()
    },
    async index (data, activeName) { // 点击修改按钮弹出框
      this.setDialogVisible = true
      const { data: res } = await this.$http.get('categories/' + data.cat_id + '/attributes/' + data.attr_id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cat_id = res.data.cat_id
      this.attr_id = res.data.attr_id
      console.log(activeName)
      this.onlyForm.attr_sel = activeName
      this.onlyForm.attr_name = res.data.attr_name
    },
    async del (data) { // 删除一步到位哈哈哈
      const datas = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(res => res) // 通过catch捕获错误并且返回res
      if (datas === 'cancel') return
      const { data: res } = await this.$http.delete('categories/' + data.cat_id + '/attributes/' + data.attr_id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getCategoriesList()
      this.getCategoriesListDo()
    },
    async handleInputConfirm (data, activeName) { // 提交tag信息
      if (!data.inputValue) { // 判断是否填写了
        data.inputVisible = false
        return false
      }
      this.saveTag(data, activeName)
    },
    async tagClose (data, index, activeName) { // 删除分类参数名称
      data.attr_vals.splice(index, 1)
      var tag = data.attr_vals.join(',') + data.inputValue + ',' // 进行tag的字符串拼接
      tag = tag.slice(0, tag.length - 1)
      const { data: res } = await this.$http.put('categories/' + data.cat_id + '/attributes/' + data.attr_id, { attr_name: data.attr_name, attr_sel: activeName, attr_vals: tag })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getCategoriesList()
      this.getCategoriesListDo()
    },
    async saveTag (data, activeName) {
      const tag = data.attr_vals.join(',') + data.inputValue + ',' // 进行tag的字符串拼接
      console.log(tag)
      const { data: res } = await this.$http.put('categories/' + data.cat_id + '/attributes/' + data.attr_id, { attr_name: data.attr_name, attr_sel: activeName, attr_vals: tag })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getCategoriesList()
      this.getCategoriesListDo()
    }
  }
}
</script>

<style lang="less" scoped>
.el-alert {
  margin-bottom: 20px;
}
.el-cascader {
  margin-top: -5px;
  margin-left: 5px;
}
.el-tabs {
  margin-top: 20px;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
